<template>
  <a-modal
    :maskClosable="maskClosable"
    title="应用场景设置"
    :width="500"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="应用场景推荐">
            {{ typeCnMap[model.sceneSuggest] || "其它" }}
        </a-form-item>
        <a-form-item label="应用场景选择">
          <a-radio-group v-model="model.sceneChoose">
            <a-radio value="OFFLINE">离线型</a-radio>
            <a-radio value="REALTIME">实时型</a-radio>
            <a-radio value="SEQUENTIAL">时序型</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from '@/api/manage'
export default {
  name: 'UpdateModal',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      dataCenterList: [],
      threshold: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      typeCnMap: {
        OFFLINE: '离线型',
        REALTIME: '实时型',
        SEQUENTIAL: '时序型',
      },
      maskClosable: false,
    }
  },
  methods: {
    update(record) {
      this.model = Object.assign({}, record)
      this.model.sceneChoose = this.model.sceneChoose || this.model.sceneSuggest
      this.visible = true
    },
    handleOk(e) {
      this.confirmLoading = true
      const postData = {
        appId: this.model.appId,
        sceneChoose: this.model.sceneChoose,
      }
      gPostAction('/profile/updateSceneChoose', postData)
        .then((res) => {
          if (res.success) {
            this.$message.success('操作成功')
            this.$emit('ok')
          }
        })
        .finally(() => {
          this.confirmLoading = false
          this.handleCancel()
        })
    },
    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.ant-radio-wrapper {
  margin-right: 40px;
}
</style>
